<template>
  <div v-cloak>
    <!-- <div class="banner" v-if="bannerList.length > 0">
      <div v-for="item in 3" :key="item.id">
        <img :src="bannerList[item].img" alt="" />
      </div>
    </div> -->
    <div class="typeParent">
      <div class="seleteType" v-if="animationTypes.length > 0">
        <div v-for="item in animationTypes" :key="item.id">
          {{ item.name }}
        </div>

        <div>全部</div>
      </div>
    </div>
    <div class="centerContext">
      <div class="context">
        <div class="title">
          <div>为你推荐</div>
          <div>换一批</div>
        </div>
        <div class="manhua">
          <VerticalAnimation
            v-for="item in recommendedCartoons"
            :key="item.id"
            :item="item"
          >
          </VerticalAnimation>
        </div>
      </div>
      <div class="context">
        <div class="title">
          <div>
            <div>热门速递</div>
            <div>二次元养老</div>
            <div>9.0分以上佳作精选</div>
          </div>
          <div>换一批</div>
        </div>
        <div class="manhua">
          <TransverseAnimation
            v-for="(item, i) in hotExpress"
            :key="item.id"
            :item="item"
            :i="i"
          >
          </TransverseAnimation>
        </div>
      </div>
      <div class="context">
        <div class="title">
          <div>都市生活</div>
          <div>更多</div>
        </div>
        <div class="manhua">
          <VerticalAnimation
            v-for="item in urbanLife"
            :key="item.id"
            :item="item"
          >
          </VerticalAnimation>
        </div>
      </div>
      <div class="context">
        <div class="title">
          <div>奇幻异界</div>
          <div>更多</div>
        </div>
        <div class="manhua">
          <VerticalAnimation
            v-for="item in fantasyAlien"
            :key="item.id"
            :item="item"
          >
          </VerticalAnimation>
        </div>
      </div>
      <div class="context">
        <div class="title">
          <div>古风恋爱</div>
          <div>更多</div>
        </div>
        <div class="manhua">
          <VerticalAnimation
            v-for="item in antiqueLove"
            :key="item.id"
            :item="item"
          >
          </VerticalAnimation>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VerticalAnimation from "@/components/VerticalAnimation.vue";
import TransverseAnimation from "@/components/TransverseAnimation.vue";

export default {
  props: {
    //动画类型
    animationType: {
      type: Array,
    },
  },
 
  components: {
    VerticalAnimation,
    TransverseAnimation,
  },

  data() {
    return {
      //轮播图图片
      bannerList: null,
      //推荐漫画
      recommendedCartoons: null,
      //热门速递
      hotExpress: null,
      //都市生活
      urbanLife: null,
      //奇幻异界
      fantasyAlien: null,
      //古风恋爱
      antiqueLove: null,
      nums: 1,
    };
  },
  computed: {
    animationTypes() {
      let arrsType = [];
      let _this = this;
      if (this.animationType != null) {
        for (var i = 0; i < 14; i++) {
          arrsType.push(_this.animationType[i]);
        }
      }

      return arrsType;
    },
  },

  created: function () {
    //获取轮播图数据
    this.$axios
      .get(`https://apis.netstart.cn/bcomic/Banner`)
      .then((result) => {
        this.bannerList = result.data.data;
        console.log(result);
      })
      .catch((err) => {
        console.log(err);
      });

    //获取推荐数据
    this.$axios
      .get(`https://apis.netstart.cn/bcomic/HomeFeed?pageNum=1&pageSize=12`)
      .then((result) => {
        this.recommendedCartoons = result.data.data.feeds;
      })
      .catch((err) => {
        console.log(err);
      });
    //获取热门速递
    this.$axios
      .get(`https://apis.netstart.cn/bcomic/SearchRecommend?num=9`)
      .then((result) => {
        this.hotExpress = result.data.data;
        // this.i = 1;
      })
      .catch((err) => {
        console.log(err);
      });
    //获取都市生活
    this.$axios
      .get(
        `https://apis.netstart.cn/bcomic/ClassPage?styleId=1002&areaId=-1&isFinish=-1&order=0&pageNum=1&pageSize=6&isFree=-1`
      )
      .then((result) => {
        this.urbanLife = result.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    //获取奇幻异界
    this.$axios
      .get(
        `https://apis.netstart.cn/bcomic/ClassPage?styleId=998&areaId=-1&isFinish=-1&order=0&pageNum=1&pageSize=6&isFree=-1`
      )
      .then((result) => {
        this.fantasyAlien = result.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    //获取古风恋爱
    this.$axios
      .get(
        `https://apis.netstart.cn/bcomic/ClassPage?styleId=997&areaId=-1&isFinish=-1&order=0&pageNum=1&pageSize=6&isFree=-1`
      )
      .then((result) => {
        this.antiqueLove = result.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less" scoped>
.banner {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 1160px;
  > div > img {
    width: 760px;
    height: 380px;
  }
  > div:nth-child(1) {
    height: 380px;
    // border: 1px solid black;
    overflow: hidden;
  }
  > div:nth-child(2) {
    width: 760px;

    height: 380px;
    // border: 1px solid black;
    margin: 0 auto;
  }
  > div:nth-child(3) {
    overflow: hidden;
    width: 760px;
    height: 380px;
    // border: 1px solid black;
  }
}
.typeParent {
  width: 100%;
  background-color: #212121;
  margin-top: -4px;
  user-select: none;
  .seleteType {
    width: 1160px;
    height: 73px;
    line-height: 73px;
    display: flex;
    margin: 0 auto;
    font-size: 16px;
    justify-content: space-between;
    background-color: #212121;
    > div {
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
.centerContext {
  margin-top: 40px;

  .context {
    width: 100%;
    padding: 20px 0px 16px;

    .title {
      width: 1160px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      height: 45px;
      line-height: 45px;
      > div:nth-child(1) {
        font-size: 32px;
        display: flex;
        > div {
          font-size: 14px;
          color: #32aaff;
          margin: 10px 0px 0px 28px;
        }
        > div:nth-child(1) {
          font-size: 32px;
          margin: 0px;
          color: #000000df;
        }
      }
      > div:nth-child(2) {
        text-align: center;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #32aaff;
        background-color: #32aaff29;
        width: 90px;
        border-radius: 17px;
        margin-top: 5px;
      }
    }
    .manhua {
      width: 1160px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      margin-top: 19px;
      justify-content: space-between;
    }
  }
}
</style>
